<template>
  <div>
    <a-spin :spinning="isLoading || isLoadingOther">
      <a-form :model="editForm" name="edit-form" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" autocomplete="off"
        @finish="editPost">
        <a-form-item label="账号" name="account" help="请输入账号。账号禁止修改，请慎重输入"
          :rules="[{ required: true, message: '请输入账号' }]">
          <a-input v-model:value="editForm.account" placeholder="请输入账号" :disabled="accountDisabled" />
        </a-form-item>
        <a-form-item label="密码" name="password" help="若不需要修改密码，请不要输入任何内容（新增时必填）"
          :rules="[{ required: passwordRequired, message: '请输入密码' }]">
          <a-input v-model:value="editForm.password" placeholder="请输入密码" />
        </a-form-item>
        <a-form-item label="姓名" name="name" :rules="[{ required: true, message: '请输入姓名' }]">
          <a-input v-model:value="editForm.name" placeholder="请输入姓名" />
        </a-form-item>
        <a-form-item label="职位" name="position" :rules="[{ required: true, message: '请输入职位' }]">
          <a-input v-model:value="editForm.position" placeholder="请输入职位" />
        </a-form-item>
        <a-form-item label="所属角色" name="role_id" :rules="[{ required: true, message: '请选择所属角色' }]">
          <a-checkbox-group v-model:value="editForm.role_id">
            <a-checkbox :value="item.id" name="type" v-for="item in adminRolesList">{{ item.name }}</a-checkbox>
          </a-checkbox-group>
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 4, span: 16 }">
          <a-button type="primary" html-type="submit">立即提交</a-button>
          <a-button @click="editCancel" style="margin-left:10px;">取消</a-button>
        </a-form-item>
      </a-form>
    </a-spin>
  </div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue';
import { message } from 'ant-design-vue';
import { editAdmin, getAdminDetail, getAdminRolesListOk } from "@/api/admin";   //引入api
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

const isLoading = ref(false);    // 控制loading
const isLoadingOther = ref(false);    // 控制loading

const editForm = ref({
  role_id: [],
});  // 编辑表单
const accountDisabled = ref(false);  // 账号禁止修改
const passwordRequired = ref(true);  // 密码是否必填

const id = ref(route.query.id);  // 参数id
//根据参数id获取数据
const getUrlId = () => {
  const { checkURLParamsId } = inject('checkURLParamsId');  // 依赖注入--验证参数id正确性
  if (checkURLParamsId(id)) {
    isLoading.value = true;
    getAdminDetail({ id: id.value }).then((res) => {
      isLoading.value = false;
      if (res === false) return;

      passwordRequired.value = false;  //密码不必填
      accountDisabled.value = true;  //账号禁止修改
      editForm.value.id = res.data.id;
      editForm.value.account = res.data.account;
      editForm.value.name = res.data.name;
      editForm.value.position = res.data.position;
      res.data.role_id.forEach((item) => {
        editForm.value.role_id.push(parseInt(item));  //字符串转数字
      });
    }).catch((rej) => {
      isLoading.value = false;
      message.error('获取数据失败：' + rej);
      editCancel();
    });
  }
}

// 获取接口数据列表
const editPost = () => {
  isLoading.value = true;

  editAdmin(editForm.value).then((res) => {
    if (res === false) return;

    message.success('操作成功，即将跳转……');
    setTimeout(() => { editCancel() }, 1000);
  }).catch((rej) => {
    isLoading.value = false;
    message.error('失败：' + rej);
  });
};

// 跳转到列表页
const editCancel = () => {
  isLoading.value = false;
  router.replace('/admin/admin/index');
}

const adminRolesList = ref([]); // 角色列表
// 获取角色列表
const getAdminRolesList = () => {
  isLoadingOther.value = true;
  getAdminRolesListOk({}).then((res) => {
    isLoadingOther.value = false;
    if (res === false) return;

    adminRolesList.value = res.data;  //角色列表
  });
};

// 页面加载完成后，获取数据列表
onMounted(() => {
  getAdminRolesList();
  getUrlId();
})
</script>

<style scoped></style>